<template>
  <!-- 个人-求职进程 -->
  <view
    class="box"
    @click=";(moreChage = false), (informationNoBubbles = false)"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <view class="dengLoadingVue" v-if="loding">
      <view class="maskVueHiddenShow">
        <view class="maskVueHiddenShowWrapper">
          <view class="loader">
            <view class="inner one"></view>
            <view class="inner two"></view>
            <view class="inner three"></view>
          </view>
          <view class="loding"> 数据加载中，请稍后... </view>
        </view>
      </view>
    </view>

    <view v-if="!loding">
      <view class="head">
        <!-- #ifdef MP -->
        <view style="padding-top: 100rpx"></view>
        <!-- #endif -->
        <!-- #ifndef MP -->
        <view style="padding-top: 100rpx"></view>
        <!-- #endif -->

        <view class="title">
          <image
            class="fanhui"
            @click.stop="goBack"
            src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
            mode=""
          >
          </image>
          <view class="title-text"> <span>求职进程</span></view>
          <view class="search-box">
            <input v-model="params.keyword" class="search-ipt" type="text"  />
            <image
              class="search-icon"
              src="https://pic.bangbangtongcheng.com/static/search-icon.png"
              alt=""
              @click="getList"
            />
          </view>

          <span v-if="!deleteShow" class="delete-btn" @click.stop="openDelete">批量删除</span>
          <span v-else class="delete-btn delete-off" @click.stop="closeDelete">完成</span>
        </view>

        <!-- 选项卡 -->
        <u-tabs
          :list="tabOption"
          lineWidth="0"
          :activeStyle="{
            color: '#0FA291',
            fontWeight: 'bold',
            transform: 'scale(1.1)',
          }"
          @click="changeTab"
        ></u-tabs>
      </view>

      <div ref="mainDiv" class="main">
        <view v-if="pageList.length > 0" class="page-list">
          <view :class="deleteShow?'page-list-itemDel page-list-item':'page-list-itemDel2 page-list-item'" v-for="(item, index) in pageList" :key="item.id">
            <!-- 选中 -->
            <view v-if="deleteShow" @click="selectRow(item, index)">
              <view v-if="item.selected" class="page-select" style="border: 0">
                <u-icon name="checkmark-circle-fill" color="#0FA291" size="40rpx"></u-icon>
              </view>
              <view v-else class="page-select"></view>
            </view>

            <!-- 内容 -->
            <view class="page-item" >
              <HireHumpItem class="item-content" :item-m-b="false" :data="item.recruitmentInformationDTO" @item-click="v => goDetail(item,index)" />
              <view class="item-status">
                <view class="wrap">
                  <view class="status">
                    <span class="select-text" @click.stop="() => changeItemStatus(item,index)">
                      <span>状态：{{ item.jobProgressText }}</span>
                      <img
                        :class="item.selectBoxShow ? 'arrow-right open' : 'arrow-right'"
                        src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right.png"
                        alt=""
                      />
                    </span>
                    <view v-show="item.selectBoxShow" class="select-box">
                      <view
                        v-for="(v, i) in jobProgressOption.slice(2, 4)"
                        :key="i"
                        :value="v.value"
                        :class="v.value === item.jobProgress ? 'checked' : ''"
                        :disabled="v.disabled"
                        @click="changeJobProgress(item, index, v)"
                      >
                        {{ v.name }}
                        <img
                          v-if="v.value === item.jobProgress"
                          class="checked-icon"
                          src="https://pic.bangbangtongcheng.com/static/checked.png"
                          alt=""
                        />
                      </view>
                    </view>
                  </view>

                  <span class="time">简历投递时间：{{ item.createDate }}</span>
                </view>
              </view>
              <view class="item-disable" v-if="item.disabledGoDetail">
                <view class="disable-content">
                  <uni-icons type="clear" color="#ffffff" size="18" style="margin-right: 8rpx;"></uni-icons>
                  招聘信息已删除
                </view>
              </view>
            </view>
          </view>
          <view class="down" v-show="noMore">没有更多了</view>
        </view>

        <!-- 空值 -->
        <view v-else>
          <view v-if="showEmpty">
            <view v-if="hasResume" class="none">
              <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
              <view>没有更多数据了</view>
            </view>

            <view v-else class="empty-box">
              <image
                class="empty-image"
                src="https://pic.bangbangtongcheng.com/static/empty.png"
                mode=""
              ></image>
              <view class="empty-text">写份简历吧！好工作主动找到你 </view>
              <navigator
                url="/pages_recruitMoney/publish/writeResume"
                open-type="navigate"
                class="empty-btn"
              >
                <span>填写简历</span>
              </navigator>
            </view>
          </view>
        </view>
      </div>

      <!-- 弹出层 -->
      <u-popup :show="deleteShow" mode="bottom" :overlay="false" @close="closeDelete">
        <view class="delete-box">
          <view @click="selectAll">
            <view v-if="hasSelectAll" class="page-select" style="border: 0">
              <u-icon name="checkmark-circle-fill" color="#0FA291" size="40rpx"></u-icon>
            </view>
            <view v-else class="page-select"></view>
          </view>
          <span class="select-all">{{ hasSelectAll ? '取消全选' : '全选' }}</span>
          <span class="delete" @click="showModal">删除</span>
        </view>
		<!-- 确认删除 -->
		<u-modal
		  :show="confirmShow"
		  @confirm="confirm"
		  @cancel="confirmShow = false"
		  ref="uModal"
		  :asyncClose="true"
		  confirmText="确定"
		  confirmColor="#0FA291"
		  showCancelButton
		  cancelText="取消"
		  cancelColor="#999"
		>
		  <view class="slot-content">
		    <view>确定删除该职位吗?</view>
		    <!-- <view>删除后相应投递简历也将删除</view> -->
		  </view>
		</u-modal>
      </u-popup>



      <!-- 返回顶部 -->
      <back-top :scrollTop="scrollTop"></back-top>
      <!-- 回到首页 -->
      <uniBall></uniBall>

      <view class="tips">仅显示最近一年的数据，最多500份</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import _ from 'lodash'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif

  export default {
    data() {
      const userInfo = uni.getStorageSync('Pduser')
      return {
        loding: true,
        scrollTop: 0,
        hasResume: false,
        userInfo: uni.getStorageSync('Pduser'),
        deleteShow: false, // 批量删除底部弹窗框
        confirmShow: false, // 确认删除弹窗
        tabOption: [
          {
            name: '全部',
            value: '',
          },
          {
            name: '待沟通',
            value: '0',
          },
          {
            name: '沟通中',
            value: '1',
          },
          {
            name: '感兴趣',
            value: '2',
          },
          {
            name: '不满意',
            value: '3',
          },
        ],
        tabIndex: 0, // tab的索引
        // 简历状态
        jobProgressOption: [
          {
            name: '待沟通',
            value: 0,
          },
          {
            name: '沟通中',
            value: 1,
          },
          {
            name: '感兴趣',
            value: 2,
          },
          {
            name: '不满意',
            value: 3,
          },
        ],
        params: {
          userId: userInfo.id,
          jobProgress: '', //0：待沟通，1：沟通中，2：感兴趣，3：不满意
          keyword: '',
          longitude: '', //当前位置的经度
          latitude: '', //当前位置的纬度
          pageNo: 1,
          pageSize: 10,
        },
        pageList: [],
        total: 0,
        pageNo: 0,
        pageTotai: 0,
        noMore: false,
        status: 'loadmore',
        show: false, // 弹出层显示
        hasSelectAll: false, //是否全选
        showEmpty: false, // 获取数据之后，再显示空值，解决视觉上的闪动
        moreChage: false,
        informationNoBubbles: false,
        beforePage: '',
        WXwidth: '',
        isViewVisible: true, // 控制目标view的显示状态
        index: '',
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad() {
      const that = this
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      // this.getList();
      

      // 获取当前位置经纬度
      uni.getLocation({
        type: 'wgs84',
        timeout: 5,
        complete(res) {
          console.log(res);
          if (res.longitude) {
            that.params.longitude = res.longitude;
            that.params.latitude = res.latitude;
          }
          that.hasSelectAll = false;
          that.getList();
        },
      })
    },
    onShow() {
      const that = this
      // 判读是否有简历
      this.getUserResumeDetails();
    },
    // 上拉触发onReachBottom生命周期
    onReachBottom() {
      // 加载更多
      this.loadmore()
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop //实时获取到滚动的值
    },
    methods: {
      changeItemStatus(item, index){
        this.$set(this.pageList[index],'selectBoxShow',!item.selectBoxShow);
      },
      // 选项卡点击
      changeTab(item) {
        this.tabIndex = item.index;
        this.params.jobProgress = item.value;
        this.params.pageNo = 1;
        this.pageList = [];
        this.getList();
      },
      // 获取简历详情
      getUserResumeDetails() {
        if (!this.userInfo || !this.userInfo.id) {
          return
        }
        // 判断是否有简历
        this.$myRequest
          .get('/api/mobile/personnelOwner/getResumeDetails', {
            publisherId: this.userInfo.id,
          })
          .then((res) => {
            this.loding = false
            if (res.biographicalNotesDetails && res.biographicalNotesDetails?.realName) {
              this.hasResume = true
            }
          })
      },
      // 获取列表数据
      async getList(oldArr) {
        const res = await this.$myRequest.get(
          '/api/mobile/personnelOwner/getDeliveryRecordTabulation',
          this.params
        )
        if (res.code === 200) {
          this.hasSelectAll = false;
          this.pageNo = res.deliveryRecordTabulation.pageNo;
          this.pageTotai = Math.ceil(res.deliveryRecordTabulation.pageCount / res.deliveryRecordTabulation.pageSize); // 求最大页码
          const {
            numberResumesReceived,
            toBeCommunicated,
            toBeInterviewed,
            interestedIn,
            notSatisfied,
          } = res.deliveryRecordTabulation.quantityStatisticsList[0]
          this.total = numberResumesReceived || 0
          this.tabOption[0].name = '全部' + this.total
          this.tabOption[1].name = '待沟通' + toBeCommunicated
          this.tabOption[2].name = '沟通中' + toBeInterviewed
          this.tabOption[3].name = '感兴趣' + interestedIn
          this.tabOption[4].name = '不满意' + notSatisfied

          let list = _.cloneDeep(res.deliveryRecordTabulation.pageList)
          list.map((v) => {
            v.selected = false
            v.selectBoxShow = false
            v.fringeBenefitsArr = v.recruitmentInformationDTO.fringeBenefits.split(',')
            v.recruitmentInformationDTO.distance = v.distance;
            // 加工薪资字段
            if (v.recruitmentInformationDTO.salaryRange.includes(',')) {
              v.salaryRangeText =
                v.recruitmentInformationDTO.salaryRange.split(',')[0] +
                v.recruitmentInformationDTO.salaryRange.split(',')[1]
            } else if (v.recruitmentInformationDTO.salaryRange === '面议') {
              v.salaryRangeText = v.recruitmentInformationDTO.salaryRange
            } else {
              v.salaryRangeText = v.recruitmentInformationDTO.salaryRange + '元'
            }
            if (v.recruitmentInformationDTO.settlementMethod) {
              v.settlementMethod = v.recruitmentInformationDTO.settlementMethod;
            }
            !v.settlementMethod && (v.settlementMethod = '');
            // 加工状态字段
            if (v.jobProgress == 0) {
              v.jobProgressText = '待沟通'
            } else {
              v.jobProgressText = this.jobProgressOption.filter(
                (item) => item.value == v.jobProgress
              )[0].name
            }
            // v.itemData = {

            // }
            // 删除的、下架的、账号注销、重新编辑后台还未审核通过、有效期结束的招聘信息 ，出此弹窗。点击不进详情页
            v.disabledGoDetail = false
          })

          setTimeout(() => {
            this.showEmpty = true
            this.pageList = oldArr ? [...oldArr,...list] : list;
            this.loding = false
          }, 10)
          console.log('this.pageList', this.pageList)
        }
      },
      // 加载更多
      async loadmore() {
        console.log('maxPage', this.pageTotai)
        if (this.pageNo >= this.pageTotai) {
          this.noMore = true
          return
        } else {
          this.params.pageNo++
          this.oldList = this.pageList
          await this.getList(this.oldList);
        }
      },
      // 选中Row
      selectRow(item, index) {
        this.$set(this.pageList, index, {
          ...this.pageList[index],
          selected: !this.pageList[index].selected,
        })
        // 如果取消了一条，就取消全选
        this.hasSelectAll = this.pageList.every((v) => v.selected)
      },
      // 更改状态
      async changeJobProgress(item, index, v) {
        // 请求接口，切换状态
        const statusParams = {
          userId: this.userInfo.id,
          objectivesId: item.id,
          userIdentity: 1, // 用户标识（1：求职进程，2：收到简历）
          status: v.value, //状态（2：感兴趣，3：不满意）
          resumeId: item.resumeId,
          id: item.id,
        }
        const res = await this.$myRequest.post(
          '/api/mobile/personnelOwner/modifyJobProgress',
          statusParams
        )
        if (res.code === 200) {
          this.showEmpty = false
          this.pageList[index].selectBoxShow = false
          this.params.pageNo = 1;
          this.getList()
        }
      },

      // 底部弹出层
      openDelete() {
        this.hasSelectAll = false
        this.deleteShow = true
        this.show = true
		this.pageList.map((v) => (v.selected = false))
        // console.log('open');
      },
      closeDelete() {
        this.deleteShow = false
        // console.log('close');
      },

      // 全选
      selectAll() {
        this.hasSelectAll = !this.hasSelectAll
        if (this.hasSelectAll) {
          this.pageList.map((v) => (v.selected = true))
        } else {
          this.pageList.map((v) => (v.selected = false))
        }
      },
      // 跳转到招聘详情
      goDetail(item, index) {
        console.log(item)
        // 删除的、下架的、账号注销、重新编辑后台还未审核通过、有效期结束的招聘信息 ，出此弹窗。点击不进详情页
        if (item.userInformation) {
          if (item.userInformation.delFlag == '1') {
            // 用户是否注销
            this.$set(this.pageList[index], 'disabledGoDetail', true)
            return
          }
          if (item.recruitmentInformationDTO.deleteFlag == '1') {
            // 是否删除招聘信息
            this.$set(this.pageList[index], 'disabledGoDetail', true)
            return
          }
          if (item.recruitmentInformationDTO.shelfStatus == '0') {
            // 上下架
            this.$set(this.pageList[index], 'disabledGoDetail', true)
            return
          }
		  if (item.recruitmentInformationDTO.auditStatus != '1') {
		    // 审核状态
		    this.$set(this.pageList[index], 'disabledGoDetail', true)
		    return
		  }
          if (item.recruitmentInformationDTO.erciShenhe > 0) {
            // 二次审核条数大于0，不能查看详情
            this.$set(this.pageList[index], 'disabledGoDetail', true)
            return
          }
        } else {
          this.$set(this.pageList[index], 'disabledGoDetail', true)
          return
        }
        uni.navigateTo({
          url: `/pages_recruitMoney/my/jobDetail?id=${item.id}&resumeId=${item.resumeId}`,
        })
      },
      // 删除弹窗
      showModal() {
        const count = this.pageList.filter((v) => v.selected).length
        if (count === 0) {
          uni.showToast({
            title: '请选择要删除的数据',
            icon: 'none',
          })
        } else {
          this.confirmShow = true
        }
      },
      // 确认删除
      async confirm() {
        console.log('pageList', this.pageList)
        const deleteList = this.pageList.filter((v) => v.selected)
        console.log('deleteList', deleteList)
        const ids = deleteList.map((v) => v.id).join(',')
        const params = {
          userId: this.userInfo.id,
          ids,
        }

        console.log('params', params)

        const res = await this.$myRequest.post(
          '/api/mobile/personnelOwner/dislodgePostingResume',
          params
        )
        if (res.code === 200) {
          // 关闭删除确认弹窗
          this.confirmShow = false
          // 关闭全选删除弹窗
          this.deleteShow = false
          this.pageList.length = 0;
          this.params.pageNo = 1;
          await this.getList();
        }
      },

      goBack() {
        uni.navigateBack({
          delta: 1,
        })
      },

      // 旧代码------------------------------------
      handleTouchStart(event) {
        console.log('@@@')
        // 记录开始触摸的Y坐标
        this.startY = event.touches[0].clientY;
      },
      handleTouchMove(event) {
        // 当前触摸的Y坐标
        const currentY = event.touches[0].clientY
        // 计算滑动的距离
        const distance = currentY - this.startY
        // 根据滑动的距离判断是上滑还是下滑
        if (distance > 6) {
          // 上滑操作
          this.isViewVisible = true
        } else if (distance < -6) {
          // 下滑操作
          this.isViewVisible = false
        }
      },
      handleTouchEnd() {
        // 可以在这里做一些触摸结束后的处理
      },

      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },

      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .box {
    padding-top: 260rpx;
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7f9;
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 0 20rpx;
    width: 100%;
    background: url('https://pic.bangbangtongcheng.com/static/MyHomePages/my-public.png') 0 0
      no-repeat;
    background-size: cover;

    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;

      .fanhui {
        width: 30rpx;
        height: 30rpx;
      }

      .title-text {
        position: relative;
        margin-left: 10rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
        white-space: nowrap;
      }

      .search-box {
        position: relative;
        margin: 0 20rpx;
        width: 180rpx;
        height: 48rpx;
        border-radius: 48rpx;
        border: 1rpx solid #DADBDE;

        .search-ipt {
          padding: 8rpx 20rpx;
          width: 150rpx;
          font-size: 24rpx;
          height: 100%;
        }

        .search-icon {
          position: absolute;
          top: 50%;
          right: 15rpx;
          transform: translateY(-50%);
          width: 25rpx;
          height: 25rpx;
          background: #fff;
        }
      }

      .delete-btn {
        display: inline-block;
        min-width: 130rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        background: #0fa291;
        border-radius: 22rpx;
      }

      .delete-off {
        color: #0fa291;
        background: #fff;
        border: 1rpx solid #0fa291;
      }
    }

    .u-tabs {
      margin-top: 15rpx;
    }
  }

  .main {
    padding-bottom: 200rpx;
    overflow: hidden;

    .empty-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;

      .empty-image {
        margin-top: 240rpx;
        width: 400rpx;
        height: 309rpx;
      }

      .empty-text {
        margin-top: 16rpx;
        margin-bottom: 35rpx;
        color: #666;
        font-size: 28rpx;
      }

      .empty-btn {
        width: 400rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        font-weight: 500;
        color: #fff;
        font-size: 32rpx;
        background: #0fa291;
        border-radius: 45rpx;
      }
    }

    .page-list {
      .page-list-itemDel {
		  width: 700rpx;
	  }	
	 .page-list-itemDel2 {
		 width: 800rpx;
	  }  
      .page-list-item {
        margin: 20rpx;
        display: flex;
        align-items: center;
        

        .page-item {
          position: relative;
          width: 710rpx;
					border-radius: 10rpx;

          .item-content {
            border-radius: 0rpx;
						
						/deep/ .item-user{
							padding-bottom: 14rpx;
						}

            .item-title {
              display: flex;
              align-items: center;
              width: 100%;

              .title-tag {
                padding: 8rpx 11rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #0fa291;
                background: #e7f5f4;
                border-radius: 4rpx;
              }

              .title-text {
                flex: 1;
                margin-left: 10rpx;
                font-size: 32rpx;
                font-weight: 500;
                color: #000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .info1 {
              margin: 24rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .line-left {
                display: flex;
                align-items: flex-start;
                white-space: nowrap;

                .team {
                  display: flex;
                  align-items: flex-start;
                  // margin-right: 46rpx;
                  white-space: normal;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 160rpx;
                  & > img {
                    margin-right: 5rpx;
                    width: 24rpx;
                    height: 24rpx;
                  }

                  & > span {
                    color: #333;
                    font-size: 24rpx;
                    line-height: 24rpx;
                  }
                }
				.team2 {
				  display: flex;
				  align-items: center;
				  margin-right: 26rpx;
				
				  & > img {
				    margin-right: 5rpx;
				    width: 24rpx;
				    height: 24rpx;
				  }
				
				  & > span {
				    color: #333;
				    font-size: 24rpx;
				  }
				}
              }

              .line-right {
                text-align: right;
                font-weight: 600;
                font-size: 32rpx;
                color: #e00201;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
              }
            }

            .info2 {
              position: relative;
              width: 100%;
              height: 35rpx;
              overflow: hidden;

              .fringe {
                margin-right: 10rpx;
                padding: 8rpx 15rpx;
                height: 40rpx;
                color: #666;
                font-size: 24rpx;
                background: #f5f7f9;
                border-radius: 4rpx;
              }

              .show-more {
                position: absolute;
                top: 0;
                right: 0;
                width: 34rpx;
                height: 34rpx;
              }
            }
          }

          .item-address {
            padding: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;

            .address-left {
              display: flex;
              align-items: center;

              & > img {
                margin-right: 10rpx;
                width: 40rpx;
                height: 40rpx;
              }

              .tag-type {
                width: 74rpx;
                height: 30rpx;
              }

              .name {
                max-width: 350rpx;
                color: #333;
                font-size: 24rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .address-right {
              display: flex;
              align-items: center;

              & > img {
                margin-right: 5rpx;
                width: 24rpx;
                height: 24rpx;
              }
            }
          }

          .item-status {
            padding: 0 20rpx;
            background: #fff;
            border-radius: 0 0 20rpx 20rpx;

            .wrap {
              padding: 20rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-top: 0.5rpx solid #f1f5f5;

              .status {
                position: relative;

                .select-text {
                  padding: 0 10rpx;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 220rpx;
                  height: 50rpx;
                  line-height: 50rpx;
                  color: #666;
                  font-size: 24rpx;
                  background: #f5f7f9;
                  border-radius: 6rpx;
                  border: 1rpx solid #ebebed;

                  .arrow-right {
                    margin-left: auto;
                    width: 28rpx;
                    height: 28rpx;
                    transform: rotate(90deg);
                    transition: all 0.3s ease-in-out;
                  }

                  .open {
                    transform: rotate(-90deg);
                  }
                }

                .select-box {
                  position: absolute;
                  left: 0;
                  top: 55rpx;
                  z-index: 3;
                  width: 240rpx;
                  line-height: 70rpx;
                  text-align: center;
                  font-size: 28rpx;
                  color: #333;
                  background: #f5f7f9;
                  border-radius: 6rpx;
                  border: 1rpx solid #ebebed;

                  .checked {
                    position: relative;
                    background: #e7f5f4;

                    .checked-icon {
                      position: absolute;
                      top: 50%;
                      right: 10rpx;
                      transform: translateY(-50%);
                      width: 28rpx;
                      height: 28rpx;
                    }
                  }
                }
              }

              .time {
                font-size: 24rpx;
                color: #666;
				white-space: nowrap;
				    overflow: hidden;
				    text-overflow: ellipsis;
              }
            }
          }

          .item-disable {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .disable-content {
              padding: 10rpx 30rpx;
              display: flex;
              align-items: center;
              color: #fff;
              font-size: 24rpx;
              background: rgba(17, 17, 17, 0.6);
              border-radius: 10rpx;
              transform: rotate(-18deg);
            }
          }
        }
      }
    }
  }

  .page-select {
    margin-right: 20rpx;
    width: 38rpx;
    height: 38rpx;
    border: 0.5rpx solid #ccc;
    border-radius: 50%;
  }

  .delete-box {
    display: flex;
    align-items: center;
    padding: 54rpx 39rpx;
    width: 100%;
    border-radius: 30rpx 30rpx 0 0;
    border: 0;
    box-shadow: 0 -10rpx 20rpx 0 #dde4e3;

    .select-all {
      margin-right: 50rpx;
      font-size: 32rpx;
      color: #000;
    }

    .delete {
      font-size: 32rpx;
      color: #666;
    }
  }

  .slot-content {
    text-align: center;
    font-weight: 500;
    font-size: 36rpx;
    color: #000000;
  }

  // 空状态
  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .tips {
    position: fixed;
    bottom: 0;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom) / 2);
    box-sizing: content-box;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    background: #f5f7f9;
  }

  .dengLoadingVue {
    .maskVueHiddenShow {
      z-index: 999999;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;

      .maskVueHiddenShowWrapper {
        width: 80%;
        height: 300rpx;
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        animation: 0.5s;

        .loding {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
  }

  .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #64b6a8;
  }

  .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #64b6a8;
  }

  .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #64b6a8;
  }

  @keyframes rotate-one {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-two {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-three {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }

  @keyframes maskVueHiddenShowWrapper {
    0% {
      width: 80%;
    }

    100% {
      width: 0;
    }
  }

  .down {
    margin-bottom: 50rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }
</style>
